<template>
  <div>
    <page-header-wrapper />
    <a-card :loading="loading" :title="$t('menu.site.content.carousel_items')" style="margin-top: 20px">
      <a slot="extra" @click="visible = true">添加轮播图片</a>
      <a-table
        :columns="columns"
        :data-source="carouselItems"
        bordered
        :rowKey="record=>record.carousel_id"
        :pagination="pagination"
      >
        <template slot="carousel_image" slot-scope="text, record">
          <img style="width: 80px" :src="`${BASE_URL}/community/tool/get_file/${record['carousel_image']}`">
        </template>
        <template slot="operation" slot-scope="text, record">
          <a @click="_updateCarousel(record)" style="float: left; margin-right: 10px;">编辑轮播图</a>
          <div class="editable-row-operations">
            <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => _delCarousel(record)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model="visible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="_addCarousel">
      <a-form-item
        v-for="(item, index) in add"
        :key="index"
        v-if="index !== 'carousel_id'"
      >
        {{ $t(`form.basic-form.${index}`) }}：
        <div v-if="index === 'carousel_image'">
          资源库id:
          <a-input
            v-model="add[index]"
            style="width: 180px; margin-right: 10px"
          />
          或者：
          <a-upload
            name="file"
            :multiple="true"
            :action="`${BASE_URL}/community/tool/save_file`"
            :headers="{
              authorization: token
            }"
            @change="handleChange"
            style="margin-bottom: 10px"
          >
            <a-button> <a-icon type="upload" /> Upload File </a-button>
          </a-upload>
          <img :src="`${BASE_URL}/community/tool/get_file/${add[index]}`" style="width: 80px">
        </div>
        <div v-else>
          <a-input
            v-model="add[index]"
          />
        </div>
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'

import {
  getCarousel,
  updateCarousel,
  delCarousel,
  addCarousel
} from '@/api/carousel'

const columns = [
  {
    title: 'GroupId',
    dataIndex: 'carousel_group_id',
    width: '8%',
    scopedSlots: { customRender: 'carousel_group_id' }
  },
  {
    title: 'carousel_name',
    dataIndex: 'carousel_name',
    width: '10%',
    scopedSlots: { customRender: 'carousel_name' }
  },
  {
    title: 'carousel_image',
    dataIndex: 'carousel_image',
    width: '25%',
    scopedSlots: { customRender: 'carousel_image' }
  },
  {
    title: 'carousel_url',
    dataIndex: 'carousel_url',
    width: '25%',
    scopedSlots: { customRender: 'carousel_url' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '25%',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'CarouselItems',
  data () {
    return {
      BASE_URL: process.env.VUE_APP_API_BASE_URL,
      visible: false,
      searchForm: {
        carousel_group_id: '',
        page: 1
      },
      loading: true,
      columns,
      carouselItems: [],
      pagination: {
        total: 0,
        onChange: (page) => {
          this.searchForm.page = page
          this.searchCarousel()
        }
      },
      form: this.$form.createForm(this),
      add: {
        carousel_id: '',
        carousel_group_id: '',
        carousel_name: '',
        carousel_image: '',
        carousel_url: '',
        carousel_direction_url: ''
      }
    }
  },
  components: {
    PageHeaderWrapper
  },
  computed: {
    token () {
      return this.$store.getters.token
    }
  },
  watch: {
    visible (value) {
      if (value === true) {
        this.add = {
          carousel_id: '',
          carousel_name: '',
          carousel_image: '',
          carousel_url: ''
        }
      }
    }
  },
  mounted () {
    this.searchForm.carousel_group_id = this.$route.params.carousel_group_id
    this.searchCarousel()
  },
  methods: {
    _delCarousel (item) {
      delCarousel(item).then(res => {
        this.searchCarousel()
      })
    },
    searchCarousel () {
      getCarousel(this.searchForm).then(res => {
        this.carouselItems = res.items
        this.pagination.total = res.count ? res.count : 0
        this.loading = false
      })
    },
    _updateCarousel (item) {
      this.visible = true
      setTimeout(() => {
        this.add = {
          carousel_id: item.carousel_id,
          carousel_name: item.carousel_name,
          carousel_image: item.carousel_image,
          carousel_url: item.carousel_url
        }
      }, 100)
    },
    _addCarousel () {
      if (this.add.carousel_image === '' || this.add.carousel_name === '') {
        this.$message.warning('轮播图 或 轮播图 名称不能为空')
        return
      }
      this.add.carousel_group_id = this.$route.params.carousel_group_id
      if (this.add.carousel_id !== '') {
        updateCarousel({
          carouselInfo: this.add
        }).then(res => {
          Object.keys(this.carouselItems).map(e => {
            if (this.add.carousel_id === this.carouselItems[e].carousel_id) {
              Object.assign(this.carouselItems[e], this.add)
            }
          })
          this.visible = false
        })
        return
      }
      addCarousel({
        carouselInfo: this.add
      }).then(res => {
        this.carouselItems.unshift(res.items)
        this.visible = false
      })
    },
    // 上传文件
    handleChange (info) {
      if (info.file.status === 'done') {
        this.add.carousel_image = info.file.response.items[0].resources_id
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>

<style scoped>
</style>
